import {Card, Button} from 'antd';
import React from 'react';
import reqwest from 'reqwest';

class ArticleInfo extends React.Component {
    state = {
        loading: true,
        body: '',
        title: '',
    };

    componentDidMount() {
        reqwest({
            url: '/api/article',
            method: 'get',
            type: 'json',
            contentType: 'application/json',
            data: {articleID: this.props.articleID},
            success: (res) => {
                if (res.error === '') {
                    this.setState({
                        body: res.article.body,
                        title: res.article.title,
                        loading: false,
                    })
                }
            }
        })
    }

    render() {
        return (
            <div>
                <Card loading={this.state.loading} title={this.state.title}>
                    <div dangerouslySetInnerHTML={{__html: this.state.body}}></div>
                </Card>
                <Button onClick={() => {
                    this.setState({
                        body: '',
                        title: '',
                    });
                    this.props.handleClickArticleInfo();
                }} style={{marginTop: 16}}>关闭</Button>
            </div>
        );
    }
}

export default ArticleInfo;